<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>仿站后台登录</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      background-color: skyblue;
    }

    form {
      width: 600px;
      display: flex;
      flex-direction: column;
      padding: 20px;
      border: 3px solid #fff;
      border-radius: 15px;
      margin: 250px auto;
      /* padding-top: 50px; */
      position: relative;
      box-sizing: border-box;
    }

    form label {
      height: 50px;
      font-size: 22px;
    }

    form input {
      padding-left: 20px;
      font-size: 22px;
    }

    form button {
      font-size: 22px;
      padding: 3px 8px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    form span {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 10px;
      color: red;
      display: none;
    }

    form span.active {
      display: block;
    }

    form h1 {
      text-align: center;
      margin-bottom: 20px;
    }
  </style>
</head>

<body>
  <form>
    <h1>登录</h1>
    <table>
      <tr>
        <td><label>用户名 </label></td>
        <td><input class="name" type="text"></td>
      </tr>
      <tr>
        <td><label>密码 </label></td>
        <td><input class="pwd" type="text"></td>
      </tr>
      <tr>
        <td colspan="2"><button>登录</button></td>
      </tr>
    </table>
  </form>
  <script src="../js/login.js" type="module"></script>
</body>

</html>